<!-- 门店统计报表 -->
<template>
  <div class="statistical-report">
    <div class="statistical-report__total">
      <div id="order_total_flex">
        <div class="total_row_item">
          <div class="order_content">
            <div class="order_total_title">正常营业总数</div>
            <div class="order_total_info">
              <span class="order_data">{{ totalData.openedNum || 0 }}</span>
            </div>
          </div>
        </div>
        <div class="total_row_item">
          <div class="order_content">
            <div class="order_total_title">
              支付功能正常
            </div>
            <div class="order_total_info">
              <span class="order_data">{{ totalData.successNum || 0 }}</span>
            </div>
          </div>
        </div>
        <div class="total_row_item">
          <div class="order_content">
            <div class="order_total_title">门店在职人数</div>
            <div class="order_total_info">
              <span class="order_data">{{ totalData.clerkNum || 0 }}</span>
            </div>
          </div>
        </div>
        <div class="total_row_item">
          <div class="order_content">
            <div class="order_total_title">
              累计闭店总数
            </div>
            <div class="order_total_info">
              <span class="order_data">{{ totalData.closedNum || 0 }}</span>
            </div>
          </div>
        </div>
        <div class="total_row_item">
          <div class="order_content">
            <div class="order_total_title">
              累计建店总数
            </div>
            <div class="order_total_info">
              <span class="order_data">{{ totalData.totalNum || 0 }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="statistical-report__form">
      <el-form :inline="true" :model="formInline">
        <el-form-item label="店铺名称">
          <br />
          <el-input
            v-model="formInline.storeName"
            placeholder="请输入店铺名称"
            style="margin-left:-70px;width:200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="店铺授权码">
          <br />
          <el-input
            v-model="formInline.authCode"
            placeholder="请输入店铺授权码"
            style="margin-left:-85px;width:200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="公司名称">
          <br />
          <el-input
            v-model="formInline.companyName"
            placeholder="请输入公司名称"
            style="margin-left:-70px;width:200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="店铺状态">
          <br />
          <el-select
            v-model="formInline.openStatus"
            style="margin-left:-70px;width:200px"
          >
            <el-option label="全部" value></el-option>
            <el-option label="正常营业" value="1"></el-option>
            <el-option label="已闭店" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属大区">
          <br />
          <el-input
            v-model="formInline.upOrgZone"
            placeholder="请输入公司名称"
            style="margin-left:-70px;width:200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="所属营销区域">
          <br />
          <el-input
            v-model="formInline.baseName"
            placeholder="请输入公司名称"
            style="margin-left:-100px;width:200px"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="订单客户编号">
          <br />
          <el-input v-model="formInline.orderCustomerCode" placeholder="请输入公司名称" style="margin-left:-100px;width:200px"></el-input>
        </el-form-item> -->
        <el-form-item label="支付状态">
          <br />
          <el-select
            v-model="formInline.payStatus"
            style="margin-left:-70px;width:200px"
          >
            <el-option label="全部" value></el-option>
            <el-option label="支付正常" value="1"></el-option>
            <el-option label="待测试" value="0"></el-option>
            <el-option label="支付失败" value="-1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-top: 40px;">
          <el-button
            type="primary"
            @click="searchData()"
            size="mini"
            icon="el-icon-search"
            >查询</el-button
          >
          <el-button @click="kong()" size="mini" icon="el-icon-delete"
            >重置</el-button
          >
          <el-button
            type="success"
            :loading="exportLoading"
            @click="exportExcel()"
            size="mini"
            icon="el-icon-s-data"
            >导出</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <div class="statistical-report__table">
      <el-table
        :data="tableData"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        border
        v-loading="loading"
      >
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="60"
        ></el-table-column>
        <el-table-column
          label="店铺名称"
          prop="storeName"
          width="235px"
          align="center"
        ></el-table-column>
        <el-table-column
          label="店铺授权码"
          prop="authCode"
          align="center"
        ></el-table-column>
        <el-table-column
          label="公司名称"
          prop="storeName"
          align="center"
        ></el-table-column>
        <el-table-column
          label="店铺状态"
          prop="openStatusName"
          align="center"
        ></el-table-column>
        <el-table-column
          label="所属大区"
          prop="upOrgZone"
          align="center"
        ></el-table-column>
        <el-table-column
          label="所属营销区域"
          prop="baseName"
          align="center"
        ></el-table-column>
        <el-table-column
          label="支付状态"
          prop="payStatus"
          align="center"
        ></el-table-column>
        <el-table-column
          label="在职人数"
          prop="clerkNum"
          align="center"
        ></el-table-column>
        <el-table-column
          label="店铺申请时间"
          prop="createTime"
          align="center"
        ></el-table-column>
        <!-- <el-table-column label="操作" align="center" width="100px">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="seedetailshop(scope.row)">查看详情</el-button>
          </template>
        </el-table-column> -->
      </el-table>
    </div>

    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.current"
        :page-sizes="[10, 20, 30, 50, 100, 150, 200]"
        :page-size="listQuery.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {
  queryStoreInfoStatList,
  queryStoreInfoStatHead,
  exportStoreInfoStatList,
} from '@/api/maineseeReports';
export default {
  data() {
    return {
      dateTime: '',
      formInline: {
        storeName: '',
        authCode: '',
        companyName: '',
        openStatus: '',
        upOrgZone: '',
        baseName: '',
        orderCustomerCode: '',
        payStatus: '',
      },
      totalData: {},
      tableData: [],
      loading: false,
      listQuery: {
        current: 1,
        size: 10,
      },
      total: 0,
      exportLoading: false,
    };
  },
  created() {
    this.searchData();
  },
  methods: {
    searchData() {
      this.listQuery.current = 1;
      queryStoreInfoStatHead({
        size: 10,
        current: 1,
        condition: {
          ...this.formInline,
        },
        ascs: [],
        descs: [],
      }).then((res) => {
        if (res.code == 1) {
          this.totalData = res.result;
        } else {
          this.$message.error(res.message);
        }
      });

      this.getList();
    },

    getList() {
      this.loading = true;
      queryStoreInfoStatList({
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          ...this.formInline,
        },
        ascs: [],
        descs: [],
      })
        .then((res) => {
          if (res.code == 1) {
            this.tableData = res.records;
            this.total = res.total;
            this.listQuery.current = res.current;
            this.listQuery.size = res.size;
          } else {
            this.$message.error(res.message);
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },

    handleSizeChange(val) {
      this.listQuery.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.getList();
    },

    kong() {
      this.formInline = this.$options.data().formInline;
    },
    exportExcel() {
      this.exportLoading = true;
      let data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          ...this.formInline,
        },
        ascs: [],
        descs: [],
      };
      exportStoreInfoStatList(data)
        .then((res) => {
          const byteCharacters = atob(res); //将base64转换为二进制字符串
          const byteNumbers = new Array(byteCharacters.length);
          for (let i = 0; i < byteCharacters.length; i++) {
            byteNumbers[i] = byteCharacters.charCodeAt(i);
          }
          const byteArray = new Uint8Array(byteNumbers);

          const link = document.createElement('a');
          let blob = new Blob([byteArray], {
            type: 'application/vnd.ms-excel',
          });
          link.style.display = 'none';
          //设置连接
          link.href = URL.createObjectURL(blob);
          link.download = '门店统计报表.xlsx';
          document.body.appendChild(link);
          //模拟点击事件
          link.click();
        })
        .finally(() => {
          this.exportLoading = false;
        });
    },

    seedetailshop(v) {
      console.log('~🚀🚀🚀🚀~🚀🚀🚀🚀~🚀🚀🚀🚀~ ~ v:', v);
      this.$router.push({
        name: 'infoCaterMerchantscopy',
        params: {
          v: {
            ...v,
            // uuid: v.orgSeq
          },
          shen: false,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.statistical-report {
  margin: 20px 0;
  &__total {
    #order_total_flex {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-around;

      /deep/ .order_content {
        cursor: pointer;
        width: 200px;
        padding: 20px 0;
        margin: 0 auto;
        text-align: center;
        overflow: hidden;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);

        .order_total_title {
          color: #000;
        }

        .order_total_info {
          margin-top: 10px;
        }

        .order_data {
          font-size: 1.4em;
          font-weight: bold;
        }
      }

      /deep/ .order_detail {
        width: 200px;
        margin-top: 10px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
      }

      /deep/ .order_content2 {
        width: 60px;
        cursor: pointer;
        padding: 10px 0;
        margin: 0 1px;
        text-align: center;
        overflow: hidden;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
      }
    }
  }

  &__form {
  }
}
</style>
